<script>
import {ref} from 'vue'
import {zong_men} from '@/activity/fu_ben/zong_men.js'
import zong_men_detail from '@/components/zong_men_detail.vue'

export default {
  props: ['changRouter'],
  setup(props) {
    let in_come = ref(false)
    let zong_men_num = ref(0)
    return {
      in_come,
      zong_men_num,
      zong_men,
      xian(){
        props.changRouter("xian")
      },
      changeCome(){
        in_come.value = false
      },
      // 进入关卡
      goto_zong_men(index) {
        this.zong_men_num = index
        this.in_come = true
      }
    }
  },
  components: {
    "zong_men_detail": zong_men_detail
  }
}
</script>

<template>
  <div v-if="!in_come" class="fu_ben_main">
    <n-divider>宗门</n-divider>
    <div class="item" v-for="(v,i) in zong_men" @click="goto_zong_men(i)">{{ v.name }}</div>
  </div>
  <div v-else>
    <zong_men_detail :zong_men_num="zong_men_num" :xian="xian" @changeCome="changeCome"></zong_men_detail>
  </div>
</template>

<style scoped lang="scss">

.fu_ben_main {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item {
  width: 168px;
  height: 120px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 8px;
  line-height: 120px;
  text-align: center;
  user-select: none;
  cursor: pointer;
}

</style>
